<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>许愿墙</title>
	<link rel="stylesheet" href="./Public/wish/Css/index.css" />
	<script type="text/javascript" src='./Public/wish/Js/jquery-1.7.2.min.js'></script>
	<script type="text/javascript" src='./Public/wish/Js/index.js'></script>
	<script src="./Public/jquery-1.11.3.min.js"></script>
	<style>
		#welcome p{
			float: left;
            margin-left: 10px;
            margin-top:5px;
		}
	</style>
	<script>
		$(function(){
//			异步添加文章,不需要用未来元素，模态框中要使用未来元素
//			$('#add').submit(function(){
            $('#send-form').delegate('#add','submit',function(){
				var formdata = $(this).serialize();   //获得表单所有数据
				$.ajax({
					type:'post',
					url:'index.php?c=wishes&a=add',
					data:formdata,
					dataType:'json',
					success:function(data){
                        var str ='<dl class="paper '+data.color+'">';
                        str += "<dt><span class='username'>"+data.username+"</span>";
                        str += "<span class='num'>No."+data.nonum+"</span></dt>";
                        str += "<dd class='content'>"+data.content+"</dd>";
                        str += "<dd class='bottom'><span class='time'style='position: relative;left: 60px;top: 17px;'>"+data.time+"</span>";
                        str += "<a href='javascript:;' title='' class='edits' id='"+data.nonum+"'></a>";
                        str += "<a  class='del' href='javascript:;' id='"+data.nonum+ "'></a>";
                        str += "<a class='close' href='' ></a></dd>";
                        str += "</dl>";

//                        清空表单
                        $('#add')[0].reset();

//                        表单消失
                        $( '#send-form' ).fadeOut( 'slow', function () {
                            $( '#windowBG' ).remove();
                        } );
//                        追加
                        $('#main').append(str);

                        var paper = $( '.paper' );
                        var FW = $( window ).width();
                        var FH = $( '#main' ).height();
                        for (var i = 0; i < paper.length; i++) {
                            var obj = paper.eq(i);
                            obj.css( {
                                left : parseInt(Math.random() * (FW - obj.width())) + 'px',
                                top : parseInt(Math.random() * (FH - obj.height())) + 'px'
                            } );
                            drag(obj, $( 'dt', obj ));
                        }
					}
				})
			})
//            异步添加文章结束

//            异步编辑文章获得编辑的对像从而得到原始数据
            var id;    //编辑对象的id设置为全局变量
            $('body').delegate('.edits','click',function(){
                id=null;
                id = $(this).attr('id');   //获得编辑对象的id号
                $.ajax({
                    type:'post',
                    url:'index.php?c=wishes&a=editolddata',
                    data:{id:id},
                    dataType:'json',
                    success:function(olddata){

                        $('#edit-form #username').val(olddata.username);
                        $('#edit-form #content').val(olddata.content);
                    }
                })
            })
//            异步编辑文章获得原始数据---结束

//            异步编辑文章---修改
            $('body').delegate('#edit','submit',function(){
                var forms = $(this).serialize();  //获得修改之后的数据
                var __this = $(this);
                $.ajax({
                    type:'post',
                    url:'index.php?c=wishes&a=edit',
                    data:forms,
                    dataType:'json',
                    success:function(datas){
//                        方法一：需要刷新，不行
//                        __this.eq(id).children('.num').text('No.'+datas.nonum);
//                        __this.eq(id).find('.username').text(datas.username);
//                        __this.eq(id).children('.content').val(datas.content);
//                        __this.eq(id).children('.time').text(datas.time);

//                        方法二：
                        $('dl').eq(id).children('.num').text('No.' + datas.nonum);
                        $('dl').eq(id).children('dt').children('.username').text(datas.username);
                        $('dl').eq(id).children('.content').text(datas.content);
                        $('dl').eq(id).children('.time').text(datas.time);

//                        表单消失
                        $( '#edit-form' ).fadeOut( 'slow', function () {
                            $( '#windowBG1' ).remove();
                        } );
                        alert('编辑成功');
                    }
                })
            })
//            异步编辑文章---修改-结束

////            异步删除
            $('body').delegate('.del','click',function(){
                var delid = $(this).attr('id');
                var __this = $(this);
                $.ajax({
                    type:'post',
                    url:'index.php?c=wishes&a=del',
                    data:{delid:delid},
                    dataType:'json',
                    success:function(dels){
                        if(dels==1){
                            __this.parents('dl').remove();
                        }
                    }
                })
            })
		})
	</script>
</head>
<body>
<?php if (isset($_SESSION['username'])) { ?>
	<div id="welcome">
		<p style="color:white;font-weight: 600">欢迎<span
					style="color: red;font-size: 20px;font-weight: 600;"><?php echo $_SESSION['username']; ?></span>回来
		</p>
		<a href="index.php?c=user&a=out" title="注销"><span class="exit"></span></a>
	</div>
<?php } ?>

<div id='top'>
		<span id='send'></span>
	</div>
	<div id='main'>
        <?php foreach($this->wishdata as $k=>$v){?>
		<dl class='paper <?php echo $v['color']?>'>
			<dt>
				<span class='username'><?php echo $v['username']?></span>
				<span class='num'>No.<?php echo $v['nonum']?></span>
			</dt>
			<dd class='content'><?php echo $v['content']?></dd>
			<dd class='bottom'>
				<span class='time'style="position: relative;left: 60px;top: 17px;"><?php echo $v['time']?></span>
                <a href="javascript:;" class="edits" title="编辑" id="<?php echo $v['nonum'];?>"></a>
                <a href="javascript:if(confirm('您确定删除吗？'));" title="删除" class="del" id="<?php echo $k;?>"></a>
                <a href="" class='close'></a>
			</dd>
		</dl>
        <?php }?>
	</div>

<!--    添加开始-->
	<div id='send-form'>
		<p class='title'><span>许下你的愿望</span><a href="javascript:;" id='close'></a></p>
		<form action="javascript:;" name='wish' method="post" id="add">
			<p>
				<label for="username">昵称：</label>
				<input type="text" name='username' id='username'/>
			</p>
			<p>
				<label for="content">愿望：(您还可以输入&nbsp;<span id='font-num'>50</span>&nbsp;个字)</label>
				<textarea name="content" id='content'></textarea>
				<div id='phiz'>
					<img src="./Public/wish/Images/phiz/zhuakuang.gif" alt="抓狂" />
					<img src="./Public/wish/Images/phiz/baobao.gif" alt="抱抱" />
					<img src="./Public/wish/Images/phiz/haixiu.gif" alt="害羞" />
					<img src="./Public/wish/Images/phiz/ku.gif" alt="酷" />
					<img src="./Public/wish/Images/phiz/xixi.gif" alt="嘻嘻" />
					<img src="./Public/wish/Images/phiz/taikaixin.gif" alt="太开心" />
					<img src="./Public/wish/Images/phiz/touxiao.gif" alt="偷笑" />
					<img src="./Public/wish/Images/phiz/qian.gif" alt="钱" />
					<img src="./Public/wish/Images/phiz/huaxin.gif" alt="花心" />
					<img src="./Public/wish/Images/phiz/jiyan.gif" alt="挤眼" />
				</div>
			</p>
			<button type="submit" id='send-btn'></button>
		</form>
	</div>
<!--    添加结束-->

<!--    编辑开始-->
<div id='edit-form'>
    <p class='title'><span>许下你的愿望</span><a href="javascript:;" id='close'></a></p>
    <form action="javascript:;" name='wish' method="post" id="edit">
        <p>
            <label for="username">昵称：</label>
            <input type="text" name='username' id='username'/>
        </p>
        <p>
            <label for="content">愿望：(您还可以输入&nbsp;<span id='font-num'>50</span>&nbsp;个字)</label>
            <textarea name="content" id='content'></textarea>
        <div id='phiz'>
            <img src="./Public/wish/Images/phiz/zhuakuang.gif" alt="抓狂" />
            <img src="./Public/wish/Images/phiz/baobao.gif" alt="抱抱" />
            <img src="./Public/wish/Images/phiz/haixiu.gif" alt="害羞" />
            <img src="./Public/wish/Images/phiz/ku.gif" alt="酷" />
            <img src="./Public/wish/Images/phiz/xixi.gif" alt="嘻嘻" />
            <img src="./Public/wish/Images/phiz/taikaixin.gif" alt="太开心" />
            <img src="./Public/wish/Images/phiz/touxiao.gif" alt="偷笑" />
            <img src="./Public/wish/Images/phiz/qian.gif" alt="钱" />
            <img src="./Public/wish/Images/phiz/huaxin.gif" alt="花心" />
            <img src="./Public/wish/Images/phiz/jiyan.gif" alt="挤眼" />
        </div>
        </p>
        <button type="submit" id='send-btn'></button>
    </form>
</div>
<!--    编辑结束-->
<!--[if IE 6]>
    <script type="text/javascript" src="./Public/wish/Js/iepng.js"></script>
    <script type="text/javascript">
        DD_belatedPNG.fix('#send,#close,.close','background');
    </script>
<![endif]-->
</body>
</html>